import Vue from 'vue'
import VueRouter from 'vue-router'
import VueMoment from 'vue-moment'
import { store } from './store/store'
import EntryView from './views/EntryView.vue'
import Option from './views/Option.vue'
import AddAccount from './views/AddAccount.vue'
import TaskDetail from './views/TaskDetail.vue'
import Mint from 'mint-ui'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

Vue.use(ElementUI)
Vue.use(Mint)
Vue.use(VueRouter)
Vue.use(VueMoment)

var routes = [
  {
    path: '/options',
    component: Option,
  },
  {
    path: '/',
    component: EntryView,
    meta: {
      index: 1,
    },
  },
  {
    name: 'AddAccount',
    path: '/add-account',
    component: AddAccount,
    meta: {
      index: 1,
    },
  },
  {
    name: 'TaskDetail',
    path: '/task-detail',
    component: TaskDetail,
    meta: {
      index: 1,
    },
  },
]

// V3版本：获取后台数据（使用V3版本的正确方式）
let db = {};

// V3版本使用chrome.runtime.sendMessage获取后台数据
function getBackgroundData() {
  return new Promise((resolve) => {
    try {
      chrome.runtime.sendMessage({ action: 'getDB' }, (response) => {
        if (response && response.db) {
          resolve(response.db);
        } else {
          resolve({});
        }
      });
    } catch (error) {
      console.warn('⚠️ V3版本：获取后台数据失败:', error);
      resolve({});
    }
  });
}

// 创建路由
var router = new VueRouter({
  routes,
  mode: 'hash'
})

// 注意：全局变量将在初始化函数中设置，确保正确的加载顺序

// 创建Vue实例
const app = new Vue({
  router,
  store,
  data() {
    return {
      db: db,
      version: 'V3'
    }
  },
  render: h => h('router-view')
})

// 简化的初始化：同步方式（参考V2版本）
function simpleInit() {
  console.log('=== V3版本popup.js开始初始化 ===');
  
  try {
    // 设置全局变量（确保在正确的时机）
    window.Vue = Vue;
    window.Store = store;
    console.log('✅ V3版本：全局变量设置完成');
    
    // V3版本：立即设置db为默认值，确保页面正常显示
    db = {};
    window.db = db;
    console.log('✅ V3版本：db变量初始化完成');
    
    // 立即挂载Vue应用（不等待异步数据）
    app.$mount('#app');
    window.app = app;
    console.log('✅ V3版本：Vue应用挂载完成');
    
    // 异步获取真实数据（不阻塞页面显示）
    try {
      chrome.runtime.sendMessage({ action: 'getDB' }, (response) => {
        if (response && response.db) {
          db = response.db;
          window.db = db;
          if (window.app) {
            window.app.db = db;
          }
          console.log('✅ V3版本：后台数据异步获取完成');
        } else {
          console.log('⚠️ V3版本：获取到空数据，保持默认值');
        }
      });
    } catch (error) {
      console.warn('⚠️ V3版本：获取后台数据失败:', error);
    }
    
  } catch (error) {
    console.warn('⚠️ V3版本：初始化失败:', error);
    // 即使失败也要设置全局变量和window.db
    window.Vue = Vue;
    window.Store = store;
    window.db = db;
    app.$mount('#app');
    window.app = app;
  }
}

// DOM加载完成后初始化
if (document.readyState === 'loading') {
  document.addEventListener('DOMContentLoaded', simpleInit);
} else {
  simpleInit();
}

// 数据同步机制已集成到初始化函数中，移除独立的setTimeout
